<template>
  <div class='homenav'>
    <div class="headerTop">
      <div class="left" @click="cityfun">
        <div class="city">{{city}}</div>
        <div class="img"></div>
      </div>
      <div class="sousuo" @click='sousuofun'>
        <div class="pho"></div>
        <input type="text" placeholder="国内秋色盘点大全">
      </div>
    </div>
    <div class="hot">
      <div>热搜</div>
      <div @click="sousuoHome">秦岭</div>
      <div @click="sousuoHome">牛背山</div>
      <div @click="luying">露营</div>
    </div>
    <div class="lunbo" style="width:100%;margin:10px auto;height:150px">
      <slider ref="slider" :options="options" style='border-radius:10px'>
        <slideritem v-for="(item,index) in someList" :key="index">
          <div :style="[item.phourl,style]"></div>
        </slideritem>
        <div slot="loading">loading...</div>
      </slider>
    </div>
  </div>
</template>
<script>
import { slider, slideritem } from 'vue-concise-slider'
if (localStorage.getItem('city') == null) {
  localStorage.setItem('city', '杭州')
}
export default {
  name: 'HomeNav',
  data () {
    return {
      city: localStorage.getItem('city'),
      style: {
        width: '100%',
        height: '100%',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center'
      },
      someList: [
        {
          phourl: {
            backgroundImage: 'url(/static/Home/lunbo1.jpg)'
          },
          keyworld: ''
        },
        {
          phourl: {
            backgroundImage: 'url(/static/Home/lunbo2.jpg)'
          },
          keyworld: ''
        },
        {
          phourl: {
            backgroundImage: 'url(/static/Home/lunbo3.jpg)'
          },
          keyworld: ''
        },
        {
          phourl: {
            backgroundImage: 'url(/static/Home/lunbo4.jpg)'
          },
          keyworld: ''
        },
        {
          phourl: {
            backgroundImage: 'url(/static/Home/lunbo2.jpg)'
          },
          keyworld: ''
        }
      ],
      options: {
        currentPage: 0,
        thresholdDistance: 10,
        thresholdTime: 3000,
        autoplay: 3000,
        loop: true,
        direction: 'horizontal',
        loopedSlides: 1,
        slidesToScroll: 1,
        timingFunction: 'ease',
        speed: 300
      }
    }
  },
  components: {
    slider,
    slideritem
  },
  methods: {
    cityfun () {
      this.$router.push({
        path: '/city'
      })
    },
    sousuofun () {
      this.$router.push({
        path: '/sousuo'
      })
    },
    sousuoHome () {
      this.$router.push({
        path: '/sousuoHome'
      })
    },
    luying () {
      this.$router.push({
        path: '/luying'
      })
    }

  }
}
</script>
<style scoped lang="less">
.homenav{
  width: 100%;
  height: 200px;
  background-color: #ffdd40;
  padding: 8px 10px 0px;
  box-sizing:border-box;
}
.headerTop{
  display: flex;
  justify-content:space-between;
  .left{
    display:flex;
    .city{
      height: 30px;
      line-height:30px;
      font-weight:bold;
      font-size:16px;
      font-wight:bold;
    }
    .img{
      width: 12px;
      height: 8px;
      background-image: url(/static/Home/index_banner_down.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      margin:11px 0 11px 10px;
    }
  }
  .sousuo{
    height: 30px;
    width: 82%;
    border-radius:15px;
    background-color: #fff;
    display:flex;
    .pho{
      width: 15px;
      height: 30px;
      background-image: url(/static/Home/index_banner_search.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      margin-left:8px;
    }
    input{
      line-height:30px;
      border:none;
      outline:0;
      padding-left: 8px;
    }
  }
}
.hot{
  display:flex;
  margin:10px 0 5px;
  &>div{
    margin-right:5px;
  }
  &>div:first-child{
    padding-left:5px;
    margin-right:10px;
  }
  &>div:not(:first-child){
    padding: 2px 15px;
    background-color:#ffeea0;
    border-radius:10px;
  }
}
</style>
